<template>
  <div class="editor-wang">
    <div :id="editorId[0]" ref="wangEditorss"></div>
    <div class="text-title" @change="titleValue(title)"></div>
    <!-- v-model:value="title"
      placeholder="*请输入标题（字数不超过50）"
      :max-length="50" -->
    <div :id="editorId[1]" ref="secondWangEditorss"></div>
    <div class="">
      <span class="number">{{ number }}/3000</span>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  defineProps,
  defineComponent,
  onMounted,
  onBeforeUnmount,
  watch
} from 'vue';
let ObsClient = require('esdk-obs-browserjs');
import WangEditor from 'wangeditor';
import { getAccessGet } from '@/api/receiveDetails';
import moment from 'moment';
let background = ref('#f5f6f7');
let border = ref('none');
let height = ref('524px');
let paddings = ref('');
let wpaddings = ref('');
let top = ref('');
let padding = ref('');
let wpadding = ref('');
let wangEditorss = ref(null);
let secondWangEditorss = ref(null);
let editorId = ref(['wangeditors', 'wangeditorss']); // 渲染dom id
let editors = ref(null);
let title = ref(''); // 标题
let number = ref(0); // 内容数量
let editorData = ref(``);
let props = defineProps({
  style: String, // 区分两个富文本的样式
  editorDetail: String,
  titleValues: String,
  catchData: {}, // 内容带标签
  catchpureData: {}, // 单独内容
  content: String
});
watch(props, (newValue, oldName) => {
  // console.log(5555, newValue);
  editors.value.txt.text(newValue.content);
});
onMounted(() => {
  if (props.style === 'min') {
    height.value = '212px';
    top.value = '236px';
    padding.value = '16px';
    paddings.value = '24px';
    wpadding.value = '0px';
    wpaddings.value = '0px';
    background.value = '#fff';
    border.value = 'rgba(186,191,197,0.40)';
  } else {
    background.value = '#f5f6f7';
    border.value = 'none';
    top.value = '550px';
    padding.value = '0';
    padding.value = '0';
    wpadding.value = '20px';
    wpaddings.value = '26px';
    height.value = '524px';
  }
  // console.log(4444, props.content);

  const editor = new WangEditor(wangEditorss.value, secondWangEditorss.value);
  // console.log(324324234, editor);
  editor.config.placeholder = '请输入';
  // 配置 onchange 回调函数，将数据同步到 vue 中
  editor.config.onchange = newHtml => {
    editorData.value = newHtml;
    props.catchData(editorData.value);
    props.catchpureData(editor.txt.text());
    if (editor.txt.text().length > 3000) {
      number.value = editor.txt.text().substring(0, 3000).length;
      editor.txt.html(editor.txt.text().substring(0, 3000));
    } else {
      number.value = editor.txt.text().length;
      editor.txt.html();
    }
  };
  let id;
  let key;
  // getAccessGet().then(res => {
  //   console.log(555, res.data);
  //   id = res.data.data.Accesskeyid;
  //   key = res.data.data.Signature;
  // });
  // let obsClient = new ObsClient({
  //   access_key_id: id,
  //   secret_access_key: key,
  //   server: 'https://obs.cn-east-3.myhuaweicloud.com'
  // });
  editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    const file = resultFiles[0];
    let SourceFile = file;
    let fileName = file.lastModified + '_' + file.name;
    let fileDir = 'assets/' + moment().format('YYYY-MM-DD') + '/' + fileName;
    // obsClient.putObject(
    //   {
    //     Bucket: 'saas-information',
    //     Key: fileDir,
    //     SourceFile: SourceFile // 文件
    //   },
    //   function (err, result) {
    //     if (err) {
    //       console.error('Error-->' + err);
    //     } else {
    //       insertImgFn('https://saas-information.obs.cn-east-3.myhuaweicloud.com/' + fileDir);
    //     }
    //   }
    // );
  };
  editor.config.uploadFileName = 'hahha';
  editor.config.menus = [
    // 菜单配置
    'undo', // 撤销
    'redo', // 重复
    'head', // 标题
    'bold', // 粗体
    'fontSize', // 字号
    'fontName', // 字体
    'italic', // 斜体
    'underline', // 下划线
    'strikeThrough', // 删除线
    'foreColor', // 文字颜色
    'backColor', // 背景颜色
    // 'link', // 插入链接
    // 'list', // 列表
    'justify' // 对齐方式
    // 'quote', // 引用
    // 'emoticon', // 表情
    // 'image', // 插入图片
    // 'table' // 表格
    // "code", // 插入代码
  ];
  editor.config.uploadImgHooks = {
    before: function (xhr, editor, files) {
      // 图片上传之前触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
      // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
      // return {
      //     prevent: true,
      //     msg: '放弃上传'
      // }
    },
    success: function (xhr, editor, result) {
      // 图片上传并返回结果，图片插入成功之后触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      // imgUrl.value = Object.values(result.data).toString();
    },
    fail: function (xhr, editor, result) {
      // 图片上传并返回结果，但图片插入错误时触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
      // 图片上传出错时触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
      // 图片上传超时时触发
      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
      let url = Object.values(result.data); // result.data就是服务器返回的图片名字和链接
      JSON.stringify(url); // 在这里转成JSON格式
      insertImg(url);
      // result 必须是一个 JSON 格式字符串！！！否则报错
    }
  };
  editor.config.uploadImgMaxSize = 5 * 1024 * 1024; // 5M
  editor.config.zIndex = 1;
  // 创建编辑器
  editor.create();
  editors.value = editor;
  // if (!content.value) {
  // editor.txt.html('请编辑内容1');
  // }
  setTimeout(() => {
    if (props.content) {
      editors.value.txt.html(props.content);
    } else {
      editors.value.txt.html(props.editorDetail);
    }
  }, 1000);
  // },
  // methods: {
  function getEditorData() {
    // 通过代码获取编辑器内容
    let data = editors.value.txt.html();
    return data;
  }
});

onBeforeUnmount(() => {
  // 调用销毁 API 对当前编辑器实例进行销毁
  editors.value.destroy();
  editors.value = null;
});
// };
</script>
<style lang="less" scoped>
.editor-wang {
  width: 100%;
  position: relative;
}
.number {
  position: absolute;
  top: v-bind('top');
  right: 20px;
  z-index: 500;
  font-size: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: RIGHT;
  color: rgba(0, 0, 0, 0.2);
}
.text1 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 14px;
  color: #999999;
}
.ant-input:hover {
  border-color: none;
  border-right-width: 0 !important;
}
.ant-input:focus {
  border-right-width: 0px !important;
  outline: 0;
  box-shadow: 0 0 0 0px rgb(214 170 86 / 20%);
}
.text-title {
  margin-top: 8px;
  // background: #f8f8f8;
  // height: 60px;
  // border: 0px;
  // border-radius: 0px;
  // font-size: 18px;
  // font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  // font-weight: 500;
  // border-bottom: 1px solid #e1dddd;
}
.text-title:active {
  // border: 0px;
}
/deep/ .w-e-toolbar {
  background: #fff !important;
}
/deep/ .w-e-text ul li {
  list-style: square;
}
/deep/ .w-e-text ol li {
  list-style: decimal;
}
/deep/ .w-e-text-container {
  background-color: v-bind('background') !important;
  padding: v-bind('wpadding') v-bind('wpadding') v-bind('wpaddings') !important;
}
/deep/ .placeholder {
  padding: v-bind('wpadding') !important;
}
/deep/ #wangeditorss {
  .w-e-text-container {
    background-color: v-bind('background') !important;
    padding: v-bind('wpadding') v-bind('wpadding') v-bind('wpaddings') !important;
  }
  // height: 345px !important;
  padding: v-bind('padding') v-bind('padding') v-bind('paddings') !important;
  height: v-bind('height') !important;

  border-radius: 4px;
  border: 1px solid v-bind('border');
  // padding-bottom: 25px !important;
  word-wrap: break-word !important;
  table-layout: fixed !important;
  word-break: break-all !important;
}
/deep/ .w-e-text {
  a {
    color: #d6aa56 !important;
  }
}
/deep/ .w-e-text img {
  display: inline-block;
  /* display: inline; */
}
/deep/ .micro-ant-input:focus {
  box-shadow: 0 0 0 2px #ffffff !important;
}
/deep/ .micro-dormitory-input:focus {
  box-shadow: 0 0 0 0 rgb(0 0 0);
}
</style>
